$(function() {
	var t1 = window.setInterval(function() {
		var width = $(".col-sm-9").width();
		if (width != '0') {
			$(".chart").width(Number(width) / 3 - 40);
			genWave();
			window.clearInterval(t1);
		}
	}, 20);
});
// 画散点图data=[[],[]]
function drawChart(title, data, chartId) {
	var myChart = echarts.init(document.getElementById(chartId));
	option = {
		tooltip : {
			formatter : function(params) {
				var scaData = params.value;
				return "故障时间: " + scaData[2] + '<br/>' + "变电站: " + scaData[3]
						+ '<br/>' + "断路器名称: " + scaData[4] + '<br/>' + "线路: "
						+ scaData[5] + '<br/>' + "相别: " + scaData[6]+ '<br/>'
						+ "时间间隔: " + scaData[0]+"ms"+ '<br/>'
				        + "均值: "+scaData[7] + 'ms<br/>'
				        + "偏差: "+scaData[8] + '<br/>'
			}
		},
		polar : {

		},
		angleAxis : {
			type : 'value',
			axisLabel : {
				show : false
			},
			splitLine : {
				show : false
			}
		},
		radiusAxis : {
			axisAngle : 0,
			splitNumber : 6,
			splitArea : {
				show : true
			/*
			 * areaStyle:{
			 * color:['#9CFAA3','#6FFA79','#42F94F','#12FB22','#0FA519','#7fbfff'],
			 * opacity:0.5 }
			 */
			}
		},
		dataZoom : [ {
			type : 'inside',
			radiusAxisIndex : 0,
			start : 0,
			end : 100
		} ],
		series : [ {
			name:title,
			coordinateSystem : 'polar',
			angleAxisIndex : 0,
			radiusAxisIndex : 0,
			name : title,
			type : 'scatter',
			symbolSize : 6,
			data : data
		} ]
	};
	myChart.setOption(option);
	return myChart;
}
var nameList = [ "线路保护发信——断路器操作箱", "线路保护发信——断路器保护发信", "断路器操作箱——合闸位置信息",
                 "断路器操作箱——分闸位置信息", "断路器重合闸发信——合闸位置信息", "断路器重合闸发信——分闸位置信息" ];
var chartMap;//存放六个chart
var dataList;//图形数据，和nameList顺序一致
function genWave() {
	chartMap=new Map();
	var chartDataStr = document.getElementById("form2:chartData").value;
	var currentNodeType = document.getElementById("form2:currentNodeType").value;
	if (chartDataStr != "") {
		var dataObj = JSON.parse(chartDataStr);
		dataList=dataObj;
		$("#timeList").html("");
		if(currentNodeType!="faultDate"){
			$("#chartDiv").show();
			$("#faultDiv").hide();
			for (var i = 1; nameList.length >= i; i++) {
				chartMap.put(nameList[i-1],drawChart(nameList[i - 1], dataObj[i - 1], "chart" + i));
			}
		}else if(currentNodeType=="faultDate"){
			//如果点击的是最后一级
			$("#chartDiv").hide();
			$("#faultDiv").show();
			for (var i = 0; i<nameList.length; i++) {
				if(dataObj[i].length>0){
					initList(nameList[i], dataObj[i][0][0]);
				}else{
					initList(nameList[i], 0);
				}
			}
		}
	}
}
//最后一级列表
function initList(name,data){ 
	var li=$("<li>"+name+":<span>"+data+"ms</span></li>").appendTo($("#timeList")); 
}
var seletcedChart=null;//被选中的chart
//放大图形
function getMaxBox(clickFa) {
    var box=$(clickFa).parents(".col-sm-4");
    var title=$(clickFa).parents(".box-header")[0].innerText.trim();
    seletcedChart=chartMap.get(title);
    $(box).removeClass("col-sm-4").addClass("col-sm-12");
    $(".chart").css("height","500px");
    $(clickFa).parent().html("<i class='fa fa-clone' onclick='reverseBox(this)'></i>")
    var t1 = window.setInterval(function() {
    	var width = $(".col-sm-9").width();
    	if (width != '0') {
    		$(".chart").width(Number(width)-40);
    		seletcedChart.resize();
    		window.clearInterval(t1);
    	}
    }, 20);
    $("#chartDiv .col-sm-4").hide();
 
}
//恢复
function reverseBox(clickFa){
	var box=$(clickFa).parents(".col-sm-12");
	$(box).removeClass(".col-sm-12").addClass("col-sm-4");
	$(".chart").css("height","200px");
	$(clickFa).parent().html("<i class='fa fa-square-o' onclick='getMaxBox(this)'></i>")
	var t1 = window.setInterval(function() {
		var width = $(".col-sm-9").width();
		if (width != '0') {
			$(".chart").width(Number(width) / 3 - 40);
			$("#chartDiv .col-sm-4").show();
			seletcedChart.resize();
			for(var i in chartMap.values()){
				chartMap.values()[i].resize();
			}
			window.clearInterval(t1);
		}
	}, 20);
}
